<%@ Page Language="C#" MasterPageFile="~/MasterPages/Learning.Master" AutoEventWireup="true" CodeBehind="AspNetAjax.aspx.cs" Inherits="Mindscape.BackgroundMotion.Website.Learn.AspNetAjax" Title="Code: Learn about ASP.NET AJAX" %>
<asp:Content ID="Content3" ContentPlaceHolderID="BodyContent" runat="server">
    
    <p>
    <a href="http://ajax.asp.net"><img border="0" src="/Images/Dev/AspNetAjax.jpg" alt="ASP.NET AJAX" /></a><br /><br /><br />
    ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.
    </p>
    
    <h2>How we used ASP.NET AJAX in BackgroundMotion</h2>
    
    <p>
        In BackgroundMotion we used ASP.NET AJAX on our <b>Add</b> and <b>View</b> contribution pages.
        
        <h3>UpdatePanel</h3>
        By using UpdatePanel controls, you can refresh selected parts of the page instead of refreshing the whole page with a postback. This is referred to as performing a partial-page update. A Web page that contains a ScriptManager control and one or more UpdatePanel controls can automatically participate in partial-page updates, without custom client script.
        
        In <b>View.aspx</b> we used the UpdatePanel control to allow our Rating controls to asynchronously post back to the server without causing a page refresh. <b>This is great for usability!</b><br />
        <br />
        Its easy to use the UpdatePanel because you just need to wrap it around an existing set of ASP.NET controls as shown below:
    </p>

    <br />    
    <br />
    <div style="font-family: Consolas,Verdana; font-size: 11pt; color: black; background: white;">
        <p style="margin: 0px;">&nbsp; <span style="color: blue;">&lt;</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">UpdatePanel</span> <span style="color: red;">ID</span><span style="color: blue;">="DownloadExperienceRating"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"&gt;</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; <span style="color: blue;">&lt;</span><span style="color: maroon;">ContentTemplate</span><span style="color: blue;">&gt;</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp; <span style="color: blue;">&lt;</span><span style="color: maroon;">div</span><span style="color: blue;">&gt;</span>Rate the download experience: </p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="color: blue;">&lt;</span><span style="color: maroon;">ajaxToolkit</span><span style="color: blue;">:</span><span style="color: maroon;">Rating</span> <span style="color: red;">ID</span><span style="color: blue;">="DownloadRating"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="color: red;">MaxRating</span><span style="color: blue;">="5"</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="color: red;">StarCssClass</span><span style="color: blue;">="ratingStar"</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="color: red;">WaitingStarCssClass</span><span style="color: blue;">="savedRatingStar"</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="color: red;">FilledStarCssClass</span><span style="color: blue;">="filledRatingStar"</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="color: red;">EmptyStarCssClass</span><span style="color: blue;">="emptyRatingStar"</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <span style="color: red;">OnChanged</span><span style="color: blue;">="DownloadRating_Changed"</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <span style="color: blue;">/&gt;</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; &nbsp; <span style="color: blue;">&lt;/</span><span style="color: maroon;">div</span><span style="color: blue;">&gt;&lt;</span><span style="color: maroon;">br</span> <span style="color: blue;">/&gt;</span></p>
        <p style="margin: 0px;">&nbsp;&nbsp;&nbsp; <span style="color: blue;">&lt;/</span><span style="color: maroon;">ContentTemplate</span><span style="color: blue;">&gt;</span></p>
        <p style="margin: 0px;">&nbsp; <span style="color: blue;">&lt;/</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">UpdatePanel</span><span style="color: blue;">&gt;</span></p>
    </div>
    <br />
    
    <p>
        The UpdatePanel control contains a <b>ContentTemplate</b> which declares the region of markup which it will manage.<br />
        <br />
        <b>Tip:</b> Remember to declare a <a href="">ScriptManager</a> on each page you are using an ASP.NET AJAX control on. This will automatically manage the JavaScript resources you need. In BackgroundMotion we declared this in our master pages.
	    
	    <h3>ASP.NET AJAX Control Toolkit</h3>
	    The Control Toolkit provides a set of sample controls and extenders that makes it a snap to spice up your web site with rich functionality. We used the <a href="http://ajax.asp.net/ajaxtoolkit/Rating/Rating.aspx">Rating</a> Control and the <a href="http://ajax.asp.net/ajaxtoolkit/ModalPopup/ModalPopup.aspx">Modal Popup</a> Control in BackgroundMotion.
    </p>
    
    <br />
    <br />
    <div align="Center">
        <img src="/Images/Dev/AjaxAddPage.jpg" width="550px" alt="We used the Modal Popup control on the Add page to aid usability" /><br />
        We used the Modal Popup control on the Add page to aid usability
    </div>
    <br />
    <br />
    
    <h2>Where can I find out more information?</h2>
    
    <p>
        ASP.NET AJAX already has a rich community of resources available for you to discover. Here are some great resources to start with;
    </p>

    <ul>
        <li>Start by browsing to <a href="http://ajax.asp.net">http://ajax.asp.net</a>; you can download the framework and associated control libraries as well as viewing online documentation and samples.</li>
        <li>Read more about the UpdatePanel in the <a href="http://ajax.asp.net/docs/overview/PartialUpdates.aspx">online documentation.</a></li>
        <li><a href="http://ajax.asp.net/ajaxtoolkit/">View the online showcase</a> for the ASP.NET AJAX Control Toolkit</li>
    </ul>        
        
        
        
</asp:Content>
